// navigation dots
$dots-inside-color: #ffffff;
$dots-inside-color-hover: #dce775;
$dots-inside-color-active: #d4e157;
$dots-outside-color: #dcdcdc;
$dots-outside-color-hover: #c0ca33;
$dots-outside-color-active: #afb42b;

.dots {
    display: none;
    font-size: 0;

    > .dot {
        display: inline-block;
        position: relative;
        vertical-align: bottom;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;
        transition: none;

        // responsive
        @media(max-width: 359px) {
            width: 8px;
            height: 8px;
            margin: 2px 5px;
        }
        @media(min-width: 360px) and (max-width: 767.9px) {
            width: 9px;
            height: 9px;
            margin: 4px 5px;
        }
        @media(min-width: 768px) and (max-width: 991.9px) {
            width: 10px;
            height: 10px;
            margin: 8px 6px;
        }
        @media(min-width: 992px) and (max-width: 1199.9px) {
            width: 12px;
            height: 12px;
            margin: 8px 7px;
        }
        @media(min-width: 1200px) {
            width: 14px;
            height: 14px;
            margin: 4px 7px;
        }
    }
}

// dots vertical
.vertical-dots {
    .dots {
        position: absolute;
        z-index: 3;
        width: auto;
        height: 100%;
        top: 0;
        bottom: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;

        .dot {
            // responsive
            @media(max-width: 359px) {
                margin: 4px 0;
            }
            @media(min-width: 360px) and (max-width: 767.9px) {
                margin: 4px 0;
            }
            @media(min-width: 768px) and (max-width: 991.9px) {
                margin: 5px 0;
            }
            @media(min-width: 992px) and (max-width: 1199.9px) {
                margin: 5px 0;
            }
            @media(min-width: 1200px) {
                margin: 6px 0;
            }


        }
    }
    &.inside-navs {
        .dots {
            // responsive
            @media(max-width: 359px) {
                padding: 0 12px;
            }
            @media(min-width: 360px) and (max-width: 767.9px) {
                padding: 0 12px;
            }
            @media(min-width: 768px) and (max-width: 991.9px) {
                padding: 0 10px;
            }
            @media(min-width: 992px) and (max-width: 1199.9px) {
                padding: 0 10px;
            }
            @media(min-width: 1200px) {
                padding: 0 12px;
            }
        }
        &.inside-dots {
            .dots {
                // responsive
                @media(max-width: 359px) {
                    padding-top: 6px;
                    padding-bottom: 6px;
                }
                @media(min-width: 360px) and (max-width: 767.9px) {
                    padding-top: 7px;
                    padding-bottom: 7px;
                }
                @media(min-width: 768px) and (max-width: 991.9px) {
                    padding-top: 14px;
                    padding-bottom: 14px;
                }
                @media(min-width: 992px) and (max-width: 1199.9px) {
                    padding-top: 14px;
                    padding-bottom: 14px;
                }
                @media(min-width: 1200px) {
                    padding-top: 14px;
                    padding-bottom: 14px;
                }
            }
        }
    }
    &.outside-navs {
        &.vertical-navs {
            &.inside-dots {
                .dots {
                    // responsive
                    @media(max-width: 359px) {
                        padding: 26px 12px;
                    }
                    @media(min-width: 360px) and (max-width: 767.9px) {
                        padding: 29px 12px;
                    }
                    @media(min-width: 768px) and (max-width: 991.9px) {
                        padding: 40px 10px;
                    }
                    @media(min-width: 992px) and (max-width: 1199.9px) {
                        padding: 42px 10px;
                    }
                    @media(min-width: 1200px) {
                        padding: 54px 12px;
                    }
                }
            }
        }
        &.horizontal-navs {
            &.inside-dots {
                .dots {
                    // responsive
                    @media(max-width: 359px) {
                        padding: 4px 12px;
                    }
                    @media(min-width: 360px) and (max-width: 767.9px) {
                        padding: 6px 12px;
                    }
                    @media(min-width: 768px) and (max-width: 991.9px) {
                        padding: 10px;
                    }
                    @media(min-width: 992px) and (max-width: 1199.9px) {
                        padding: 10px;
                    }
                    @media(min-width: 1200px) {
                        padding: 12px;
                    }
                }
            }
        }
        &.outside-dots {
            .dots {
                // responsive
                @media(max-width: 359px) {
                    padding: 20px 12px;
                }
                @media(min-width: 360px) and (max-width: 767.9px) {
                    padding: 22px 12px;
                }
                @media(min-width: 768px) and (max-width: 991.9px) {
                    padding: 28px 10px;
                }
                @media(min-width: 992px) and (max-width: 1199.9px) {
                    padding: 30px 10px;
                }
                @media(min-width: 1200px) {
                    padding: 40px 12px;
                }
            }
        }
    }
}
